<template>
  <el-container>
      <el-main>
        <el-form ref="payable" :model="form" :rules="rules" label-width="80px">
          <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
            <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">领用单信息</span>
          </div>
          <div style="display: flex">
            <el-form-item label="领货仓库">
              <queryShop  @queryShopClick="queryShopClick"></queryShop>
            </el-form-item>
            <el-form-item label="领货人员"  prop="borrowEmployeeId">
              <el-select  :disabled="borrowEmployeedisbale" v-model="form.borrowEmployeeId" clearable placeholder="领货人员" @change="changeDelivery"
                         filterable @focus="getEmployeeList('')" :filter-method="queryEmployee" style="width: 150px">
                <el-option v-for="item in employee" :key="item.id" :label="item.name"
                        :value="item.id"/>
              </el-select>
            </el-form-item>

            <el-form-item label="领用日期">
              <el-date-picker
                style="width: 201px"
                v-model="form.orderDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="备注留言" prop="memo" >
              <el-input v-model="form.memo" style="width: 480px"/>
            </el-form-item>

          </div>

          <div class="product_header_name" style="">
            <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">领用明细</span>
          </div>
          <!-- <el-table
            ref="shippingTable"
            :data="shippingList"
            :height="'52vh'"
            :summary-method="getSummaries"
            show-summary
            border
            stripe
            @select="handleSelectionChange"
            @select-all="handleSelectionAllChange"
            @selection-change="selectionChangeFn"
          >
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="订单日期" align="center" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.orderDate | datetimeFormatter }}</span>
              </template>
            </el-table-column>
            <el-table-column label="送货单号" align="center" prop="sn" width="170" />

            <el-table-column label="客户信息" align="center"  >
               <template slot-scope="scope">
                  <div style="display: flex;flex-direction: column;justify-content: center" class="shop_Height">
                  <span class="table_ContentTitle">{{scope.row.consignee}} {{scope.row.phone}}</span>
                  <el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
                    <span style="margin-top: 5px" class="table_ContentTitle">{{scope.row.address}}</span>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="配送方式" align="center"  width="100" >
                <template slot-scope="scope">
                <span>{{ scope.row.shippingMethod|watchShippingMethod }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发货状态" align="center" width="100" >
              <template slot-scope="scope">
                <span>{{ scope.row.statusDescr }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品总数" width="100" align="center" prop="subQuantity">
              <template slot-scope="scope">
                <span>{{scope.row.subQuantity}}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品金额" align="center" prop="subPrice" width="120" />
            <el-table-column label="店铺优惠" align="center" prop="discount" width="120" >
              <template slot-scope="scope">
                <span>{{ scope.row.discount | watchDiscount}}</span>
              </template>
            </el-table-column>
            <el-table-column label="实付金额" align="center" prop="amountPaid" width="120" />
          </el-col>
          </el-table> -->
        <el-table
          :data="productList"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            label="商品名"
            header-align="center"
            width="250"
          >
            <template slot-scope="{row}" >
              <div  style="position: relative">
                <i class="el-icon-arrow-down" style="position: absolute;bottom: 11px;color: #CCCC;right: 8px;z-index: 99;"></i>
                <el-select v-model="row.name" filterable placeholder="请选择"  remote :remote-method="productMethod" @change="selectClick" @focus="tableClick(row)">
                  <el-option
                    v-for="(item,index) in listForm"
                    :key="index"
                    style="width:650px"
                    :label="item.name"
                    :value="index"
                  >
                    <div style="display: flex">
                      <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
                      <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{ item.name }}</span>
                      <!--                    <span style="float: right; color: #8492a6; font-size: 8px;width: 40px;margin-left: 10px">{{ item.price }}</span>-->
                      <div style="width: 200px;">
                        <span style="color: #8492a6; font-size: 8px;">{{item.spec1}}</span>
                      </div>
                    </div>
                  </el-option>
                  <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                    <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                    <div class="elOption" @click="toAddProduct">搜索商品</div>
                    <div class="elOption1" @click="toSearchProduct">新增商品</div>
                  </div>
                  <div style="height: 30px"></div>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            width="200"
            align="left"
            header-align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="货号/条码"
            align="left"
            header-align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
              align="right"
            headerAlign="center"
            width="100">
            <template slot-scope="{row}">
              <el-input @change="refreshClick" v-model="row.quantity"/>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
              align="right"
            width="100" prop="cost">
          </el-table-column>
          <el-table-column
            label="金额"
            width="100"
            align="right"
            prop="subTotal"
          >
          </el-table-column>
<!--          <el-table-column
            label="优惠"
            width="100"
            align="center"
            prop="discount"
          >
          </el-table-column>
          <el-table-column
            label="实收"
            width="100"
            align="center"
            prop="amountPaid"
          >-->
          <!-- </el-table-column> -->
          <el-table-column
            align="center"
            width="100"
            label="操作"
          >
            <template slot-scope="{row}">
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <a @click="delProduct(row)" v-if="row.productId!=''">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
            <div style="display: flex;justify-content: space-between;">
                <!--<el-input v-model="unpayAmount" readonly />-->
              <div style="margin-top: 30px;">
               <!--  <span style="font-size: 16px;color: red;">对账金额：{{unpayAmount}}</span> -->
              </div>
              <!--<el-footer class="el-footerBox" style="margin-top: 10px;">-->
              <div style="margin-top: 30px;">
                <el-button v-permission="['borrow.add']" type="primary" :loading="saveAndConfirmClicked" @click="saveAndConfirmClick">保存并确认</el-button>
                <el-button v-permission="['borrow.add']"  :loading="saveClicked" @click="saveClick">保存至草稿</el-button>
                <!-- <el-button v-permission="['borrow.audit']" type="primary" :loading="saveAndConfirmClicked" @click="saveAndOutStockClick">保存并出库</el-button> -->
              </div>
              <!--</el-footer>-->
              <!--<el-button type="primary" style="margin-top: 20px" v-permission="['purchasein.in']" :loading="clicked" @click="saveInstockClick('purchaseForm')">保存并入库</el-button>-->
              <!--<el-button type="success" style="margin-top: 20px" v-permission="['purchase.audit']" :loading="clicked" @click="saveConfirmClick('purchaseForm')">保存并确认</el-button>-->
              <!--<el-button  style="margin-top: 20px" :loading="clicked" @click="saveClick('purchaseForm')">保存至草稿</el-button>-->
            </div>
          </div>
        </el-form>

        <el-dialog
          title="选择商品"
          :visible.sync="orderVisible"
          width="68%"
          v-el-drag-dialog
          :before-close="orderClose">
          <div style="position: relative;">
            <productTable ref="productList" @orderClose="orderClose" @doubleClick="doubleClick" @addClick="addClick"></productTable>
          </div>
        </el-dialog>
      </el-main>

  </el-container>
</template>
<script>
  import { list as emoloyeeList } from '@/api/sysEmployee'
  import {EventBus} from '@/api/eventBus'
  import supplierTable from '../../components/SupplierTable/supplierList'
  import {list as productList} from '@/api/product'
  import productTable from '../../components/ProductList/productList'
  import loadMore from '@/utils/loadMore.js'
  import { list as shippingList } from '@/api/shipping'
  import { save,saveAndConfirm,saveAndOutStock } from '@/api/borrow'
  import Pagination from '@/components/Pagination'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
    import queryShop from '@/components/Query/queryShop'
  // import {
  //   getMenuTree
  // } from '@/api/sysMch.js'
  import utils from '../../utils/utils.js'
  import ElRow from "element-ui/packages/row/src/row";
  export default {
    name: 'picking-add',
    directives: { loadMore, permission ,elDragDialog},
    components: {
      ElRow,
      Pagination ,queryShop, productTable},
    filters: {
      watchShippingMethod(val){
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城快送'
        }
      },
      status(val) {
        if (val == 0) {
          return '未确认'
        } else if (val == 1) {
          return '已派单'
        } else if (val == 2) {
          return '已发货'
        } else if (val == 3) {
          return '已送达'
        } else if (val == 4) {
          return '已完成'
        } else if (val == 5) {
          return '已关闭'
        }
      },
      watchDiscount (val) {
        if (val === undefined) {
          return 0
        } else {
          return val
        }
      },
    },
    data() {
      return {
        borrowEmployeedisbale:false,
        employee: [],
        queryType: true,
        procuctVisible: false,
        orderVisible: false,
        productType: 'order',
        total: 0,
        productQty: 0,
        times:'',
        pageNum: 1,
        pageSize: 20,
        form: {
          shopId:"",
          borrowEmployeeId: '',
          borrowType: 1,
          memo: '',
          orderDate: '',
          id: '',
          itemList: []
        },
        keyword: {
          sn: ''
        },
        listForm: [],
        productList: [],
        shippingList: [],
        itemList: [],
        saveClicked: false,
        saveAndConfirmClicked:false,
        curHeight: null,
        rules: {
          employeeName:[
            {required: true, message: '请选择送货人员', trigger: 'blur'},
          ],
          orderDate: [
            {required: true, message: '业务日期不能为空', trigger: 'blur'},
          ],
        },
        pickerOptions: {// 时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    created() {
      this.loadlist('');
      this.addProduct();
      this.form.orderDate=utils.dateFormatter(new Date())
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    methods: {
       toAddProduct(){
        this.orderVisible = true;
      },
      toSearchProduct(){
        this.procuctVisible = true;
      },
      queryShopClick(data){
        this.form.shopId=data.shopId
        this.getEmployeeList()
        //this.loadShipping()
      },
      loadShipping() {//debugger
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        if (this.form.shippingEmployeeId != '')
          params.append('shippingEmployeeId', this.form.shippingEmployeeId)
        params.append('shippingStatus', 2)  //已派单
        params.append('shopId',this.form.shopId)  //已派单
        shippingList(params).then(res => {
          this.shippingList = res.data.data;
        }).catch(err => { console.log(err) })

      },
     orderClose() {
        this.orderVisible = false;
        if ( this.productList.length>0&&this.chooseOrderName!=''){
          this.productList[this.tableIndex].name = this.chooseOrderName
        }
        this.$refs.productList.cancelClick();
      },
      //商品表下拉选择
      selectClick(index) {
        var _this = this
        if (index == '#') {
          _this.procuctVisible = true;
        } else if(index=='/'){
          this.orderVisible = true;
        } else {
          var goodsDetails = {
            productId: _this.listForm[index].id,
            name: _this.listForm[index].name,
            sn: _this.listForm[index].sn,
            cost: _this.listForm[index].cost,
            price: _this.listForm[index].price,
            orders: _this.listForm[index].orders,
            subTotal: _this.listForm[index].cost, //领用使用成本价
            unit: _this.listForm[index].unit,
            spec: _this.listForm[index].spec1 + _this.listForm[index].spec2,
            quantity: 1
          };
          _this.productList[_this.tableIndex] = goodsDetails
        }
        this.procuctFilter();
//        this.addProduct();
      },
      //获取当前点击商品表行
      tableClick(data) {
        this.tableIndex = this.productList.indexOf(data);
        this.chooseOrderName = this.productList[this.tableIndex].name
      },
      //新增商品弹窗
      productClose() {
        this.procuctVisible = false;
        this.productList[this.tableIndex].name = this.chooseOrderName
      },
      saveProduct(data) {
        this.listForm.splice(0, 0, data);
        this.productList[this.tableIndex] = data;
        this.procuctVisible = false;
      },
      //商品过滤
      procuctFilter() {
        let newfood = [];
        var temp = {};
        for (var i in this.productList) {
          if (this.productList[i].productId != '') {
            var key = this.productList[i].productId+'_'+this.productList[i].cost;
            if (temp[key]) {
              temp[key].productId = temp[key].productId;
              temp[key].quantity = temp[key].quantity + this.productList[i].quantity;
              temp[key].subTotal = (parseFloat(this.productList[i].cost) * parseFloat(temp[key].quantity)).toFixed(2);
//              temp[key].amountPaid = temp[key].subTotal
            } else {
              temp[key] = {};
              temp[key].productId = this.productList[i].productId;
              temp[key].quantity = this.productList[i].quantity;
              temp[key].subTotal = (parseFloat(this.productList[i].cost) * parseFloat(temp[key].quantity)).toFixed(2);
//              temp[key].amountPaid = temp[key].subTotal
            }
            temp[key].name = this.productList[i].name;
            temp[key].sn = this.productList[i].sn;
            temp[key].price = this.productList[i].price;
            temp[key].cost = this.productList[i].cost;
//            temp[key].orders = this.productList[i].orders;
//            temp[key].discount = this.productList[i].discount;
            temp[key].spec = this.productList[i].spec;
            temp[key].unit = this.productList[i].unit
          }
        }
        for (var k in temp) {
          newfood.push(temp[k])
        }
        this.productList = newfood
        this.addProduct()
      },
      saveClick() {
        var _this = this;
        if (this.productList.length === 0) {
          this.$message({ message: '请添加领用商品', type: 'warning' })
        } else {
          this.$confirm('是否生成领用单？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveClicked = true;
            this.form.itemList = [];
            this.productList.forEach(item => {
              if (item.productId != ''){
                this.form.itemList.push(item);
              }
            })
            debugger
            save(this.form).then(res => {
              _this.saveClicked = false;debugger
              EventBus.$emit('borrow-add', res.data);
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                _this.$router.push({
                  path: '/borrow/list'
                })
              })// 关闭当前tab回到列表
            }).catch(() => { this.saveClicked = false })
          });

        }
      },
      saveAndConfirmClick() {
        var _this = this;
        if (this.productList.length === 0) {
          this.$message({ message: '请选择数据', type: 'warning' })
        } else {
          this.$confirm('是否生成领用单？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveClicked = true;
            this.productList.forEach(item => {
              if (item.productId != ''){
                this.form.itemList.push(item);
              }
            })
            saveAndConfirm(this.form).then(res => {
              _this.saveAndConfirmClicked = false;
              EventBus.$emit('borrow-add', res.data);
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                _this.$router.push({
                  path: '/borrow/list'
                })
              })// 关闭当前tab回到列表
            }).catch(() => { this.saveAndConfirmClicked = false })
          });

        }
      },
      saveAndOutStockClick() {
        var _this = this;
        if (this.productList.length === 0) {
          this.$message({ message: '请选择数据', type: 'warning' })
        } else {
          this.$confirm('是否生成领用单？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveClicked = true;
            this.productList.forEach(item => {
              if (item.productId != ''){
                this.form.itemList.push(item);
              }
            })
            saveAndOutStock(this.form).then(res => {
              _this.saveAndConfirmClicked = false;
              EventBus.$emit('borrow-add', res.data);
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                _this.$router.push({
                  path: '/borrow/list'
                })
              })// 关闭当前tab回到列表
            }).catch(() => { this.saveAndConfirmClicked = false })
          });

        }
      },
      getSummaries(param) {
        this.$nextTick(() => {
          this.$refs.shippingTable.doLayout()
        })
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 2){
              return;
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(2)
              } else {
                return prev
              }
            }, 0)
            if(index==6){
              sums[index] += ''
            }else{
              sums[index] += ' 元'
            }
          }
        })

        return sums
      },

      beforeMount() {
        window.onresize = () => {
          return (() => {
            const h = document.documentElement.clientHeight || document.body.clientHeight
            if (this.queryType === false) {
              this.curHeight = h - 266// 减去页面上固定高度height
            } else {
              this.curHeight = h - 220// 减去页面上固定高度height
            }
          })()
        }
      },
      comeIn() {
        const h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 220// 减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        const h = document.documentElement.clientHeight || document.body.clientHeight
        if (this.queryType === false) {
          this.curHeight = h - 266// 减去页面上固定高度height
        } else {
          this.curHeight = h - 220// 减去页面上固定高度height
        }
      },
      changeDelivery(val){
        this.form.borrowEmployeeId = val;
        this.loadShipping();
      },
      queryEmployee(query) {
        this.getEmployeeList(query)
      },
      getEmployeeList(query) {
        let param = new URLSearchParams()
        param.append('name', query)
        param.append('shopId', this.form.shopId)
        emoloyeeList(param).then(res => {
          this.employee = res.data.data
        })
      },
      doubleClick(val) {
        var goodsDetails = {
          productId: val.id,
          name: val.name,
          sn: val.sn,
          price: val.price,
          orders: val.orders,
          subTotal: val.price,
          cost:val.cost,
          quantity: 1,
          spec: val.spec1 + val.spec2,
          unit:val.unit,
        };
        this.productList.push(goodsDetails)
        this.procuctFilter();
      },
      addClick(data) {
        var _this = this
        console.log(data)
        data.forEach(item => {
          var goodsDetails = {
            productId: item.id,
            name: item.name,
            sn: item.sn,
            price: item.price,
            orders: item.orders,
            subTotal: item.price,
            cost: item.cost,
            quantity: 1,
            spec: item.spec1 + item.spec2,
            unit: item.unit
          };
          _this.productList.push(goodsDetails)
        });
      },
      //新增商品
      addProduct() {
        var _this = this
        if (_this.productList.length == 0) {
          _this.productList.push({
            productId: '',
            name: '',
            sn: '',
            price: '',
            orders: '',
            quantity: '',
            subTotal: '',
//            amountPaid: 0,
            spec: '',
//            discount: 0,
            cost: 0,
            unit: ''
          })
        } else {
          if (_this.productList[_this.productList.length - 1].productId!= '') {
            _this.productList.push({
              productId: '',
              name: '',
              sn: '',
              price: '',
              orders: '',
              quantity: '',
              subTotal: '',
              spec: '',
              cost: 0,
              unit: ''
            })
          }
        }
      },
      //删除商品列表
      delProduct(row) {
        console.log(row);
        var index = this.productList.indexOf(row)
        if (index !== -1) {
          this.productList.splice(index, 1)
        }
        this.addProduct()
      },
      productMethod(query){
        this.loadlist(query)
      },
      //商品总数据
      loadlist(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('keyword',query)
        params.append('sn', _this.keyword.sn)
        productList(params).then(response => {
          console.log(response);
          _this.listForm = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      //更多商品弹出
      moreProductClick() {
        var _this = this;
        _this.orderVisible = true;
      },
      //刷新商品合计
      refreshClick() {
        this.procuctFilter()
      },
    }
  }
</script>

<style scoped>

  body .el-table th.gutter {
    display: table-cell !important
  }
  .elOption1{
    background-color: #409EFF;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25%;
    height: 40px
  }
  .elOption{
    background-color: #909399;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
          padding: 10px;
          /* height: 100% !important; */
          padding-bottom: 0;
        }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_body{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
  }
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
  }
</style>
